<template>
	<view class="nav-bar">
		<view class="logoimg">
			<image src="/static/logo.png" mode="aspectFit"></image>
		</view>
		<view class="nav-items">
			<view class="nav-item" :class="{ active: currentTab === 'home' }" @click="switchTab('home')">首页</view>
			<view class="nav-item" :class="{ active: currentTab === 'about' }"  @click="switchTab('about')">关于我们</view>
			<view class="nav-item" :class="{ active: currentTab === 'products' }"  @click="switchTab('products')">产品服务</view>
			<view class="nav-item" :class="{ active: currentTab === 'news' }"  @click="switchTab('news')">新闻动态</view>
			<view class="nav-item" :class="{ active: currentTab === 'contact' }" @click="switchTab('contact')">联系我们</view>
		</view>
		<view class="login">
						<view v-if="!islogin" @click="hangdleLogin" class="login_btn">登录/注册</view>
						<view v-else class="login_info">
							<view class="">
								<image src="/static/logoS.png" mode="aspectFit"></image>
							</view>
							<view class="username-container">
								<view class="username" @click.stop>
									<text>{{ userInfo.username }}</text>
									<uni-icons type="down" size="20" color="#165dff" @click="popshow"></uni-icons>
									<!-- 弹窗 - 定位在用户名下方 -->
									<view class="popup" v-if="popupshow">
										<view class="popup_item" @click="handerUserInfo">修改资料</view>
										<view class="popup_item" @click="loginout">退出</view>
									</view>
								</view>
							</view>
						</view>
					</view>
	</view>
</template>

<script>
import { store,mutations } from '../uni_modules/uni-id-pages/common/store';
export default {
	name: 'navbar',
	data() {
		return {
			currentTab:"",
			popupshow:false
			
		};
	},
		
	computed:{
		userInfo(){
	return store.userInfo
		},
	islogin(){
		return store.hasLogin
	}
	},
	
	methods: {
		hangdleLogin() {
			uni.redirectTo({
				url:'/uni_modules/uni-id-pages/pages/login/login-withpwd'
			})
			
		},
		popshow() {
			this.popupshow = true;
			setTimeout(() => {
				this.popupshow = false;
			}, 3000);
		},
		
			loginout(){
		uni.showModal({
			title:'确定退出帐号？',
			success(res) {
				if(res.confirm){
					mutations.logout()
					uni.reLaunch({
						url:'/pages/main/main'
					})
				}
			}
		})		
			
				},
		switchTab(tab) {
			this.currentTab = tab;
			uni.navigateTo({
				url:`/pages/main/main?tab=${tab}`
			})
			
		},
			handerUserInfo(){
					uni.navigateTo({
						url:'/uni_modules/uni-id-pages/pages/userinfo/userinfo'
					})
				},
	}
};
</script>

<style lang="scss" scoped>
.nav-bar {
	display: flex;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	justify-content: space-between;
	align-items: center;
	height: 80px;
	z-index: 99;
	background-color: #ffffff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logoimg{
	display: flex;

	width: 15%;
	margin: 10rpx;
	align-items: center;
	height: 100%;
 image{
	 
	 height: 60%;}	
}

.nav-items {
	display: flex;
}

.nav-item {
	margin: 0 20px;
	padding: 10px 0;
	font-size: 16px;
	color: #666666;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

.nav-item.active {
	color: #165dff;
	border-bottom-color: #165dff;
}
.login {
	display: flex;
	height: 100%;
	width: 500rpx;
	margin-right: 0rpx;
	position: relative;
	.login_btn {
		display: flex;
		position: absolute;
		right: 100rpx;
		bottom: 5rpx;
		padding: 5rpx 20rpx;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		border-radius: 30rpx;
		color: #ffffff;
		cursor: pointer;
		background-color: #165dff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		transition: all 0.3s ease;
	}
	.login_info {
		position: absolute;
		right: 100rpx;
		bottom: 5rpx;
		display: flex;
		gap: 30rpx;
		image {
			width: 60rpx;
			height: 60rpx;
		}
		.exit {
			font-size: 28rpx;
			color: #165dff;
		}
	}
}
.popup {
	position: absolute; /* 相对于父容器定位 */
	top: 100%; /* 紧贴用户名下方 */
	right: 0;
	min-width: 180rpx;
	background-color: #fff;
	border-radius: 8rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
	z-index: 999; /* 确保弹窗在最上层 */
	margin-top: 8rpx;
}

.popup_item {
	padding: 16rpx 20rpx;
	text-align: center;
	font-size: 28rpx;
	border-bottom: 1rpx solid #f5f5f5; /* 分隔线 */

	&:last-child {
		border-bottom: none;
	}

	&:active {
		background-color: #f5f5f5; /* 点击反馈 */
	}
}
</style>
